.base {
  float: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--cui-spacings-bit);
  margin: var(--cui-spacings-kilo) 0;
  font-size: var(--cui-body-s-font-size);
  font-weight: var(--cui-font-weight-semibold);
  line-height: var(--cui-body-s-line-height);
  color: var(--cui-fg-subtle);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  background-color: var(--cui-bg-normal);
  border: none;
  border-radius: var(--cui-border-radius-bit);
  transition: color var(--cui-transitions-default);
}

.base > * {
  pointer-events: none;
}

.base:hover {
  color: var(--cui-fg-normal-hovered);
}

.base:focus {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--cui-border-focus);
}

.base:focus::-moz-focus-inner {
  border: 0;
}

.base:focus:not(:focus-visible) {
  box-shadow: none;
}

.base:active {
  color: var(--cui-fg-normal);
}

.base[aria-selected="true"],
.base[aria-current="page"] {
  position: relative;
  font-weight: var(--cui-font-weight-semibold);
  color: var(--cui-fg-normal);
}

.base[aria-selected="true"]::after,
.base[aria-current="page"]::after {
  position: absolute;
  right: 0;
  bottom: calc(
    -1 *
    calc(var(--cui-spacings-kilo) - var(--cui-border-width-kilo))
  );
  left: 0;
  z-index: var(--cui-z-index-absolute);
  height: 3px;
  content: var(--selected-tab-pseudo-content);
  background-color: var(--cui-border-accent);
  border-top-left-radius: var(--cui-border-radius-byte);
  border-top-right-radius: var(--cui-border-radius-byte);
  transition: all var(--cui-transitions-default);
}
